<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    
  </style>
</head>
<body>
  <a href="#home">首页</a>
  <a href="#login">登录</a>
  <a href="#user">个人中心</a>

  <div class="cont"></div>

</body>
<script>
  console.log(Math.random());

  const cont = document.querySelector(".cont");

  const homeStr = `<h1>这是首页</h1>`;
  const loginStr = `用户名：<input type="text" class="username"><br>
                      密码：<input type="text" class="password"><br>
                      <input type="button" value="登录" class="login">
                    `;
  const userStr = `<h1>这是个人中心</h1>`;

  // const templateHome = `<h1>这是首页</h1>`;
  // const templateLogin = `用户名：<input type="text" class="username"><br>
  //                     密码：<input type="text" class="password"><br>
  //                     <input type="button" value="登录" class="login">
  //                   `;
  // const templateUser = `<h1>这是个人中心</h1>`;


  const router = {
    home: ()=>{
      cont.innerHTML = homeStr;
    },
    login: ()=>{
      cont.innerHTML = loginStr;
    },
    user: ()=>{
      cont.innerHTML = userStr;
    }
  }

  const hash = location.hash.slice(1) || "home";
  router[hash]();

  window.onhashchange = function(){
    // console.log( location.hash );
    const hash = location.hash.slice(1);
    // switch(hash){
    //   case "#home":
    //     cont.innerHTML = homeStr;break;
    //   case "#login":
    //     cont.innerHTML = loginStr;break;
    //   case "#user":
    //     cont.innerHTML = userStr;break;
    // }

    // const h = {
    //   path:"goods",
    //   component: homeStr,
    //   name: "home"
    // }
    router[hash]();
  }
</script>
</html>